import React, { Component } from 'react';
import { View, Text, Platform, ScrollView, AlertIOS, RefreshControl, TextInput, Dimensions, KeyboardAvoidingView } from 'react-native';
import { List, Button, Modal, DatePicker, Toast, Picker, Flex } from 'antd-mobile-rn';
import Utils from '../../../../utils';
import moment from 'moment';
import userService from '../../../../service/userService';
import pickerPopup from '../../../../components/pickerPopup';
import scorePopup from '../../../../components/scorePopup';
import api from '../../../../utils/api';
import { BoxShadow } from 'react-native-shadow';
const screen = Dimensions.get("screen");


const Item = List.Item;

export default class UserTarget extends Component {

    static navigationOptions = {
        title: "备考目标",
        headerRight: (
            <View></View>
        )
    }

    state = {
        birth: new Date(),
        target: {
            targetScoreVo: {
                listening: "0.0",
                reading: "0.0",
                speaking: "0.0",
                writing: "0.0"
            }
        },
        refreshing: true
    }


    _updateStorage = (user) => {
        const { navigation } = this.props;
        Utils.setStorage("LoginUserInfo", user).then(() => {
            this.setState({
                user: user
            });
            const back = navigation.getParam("back");
            if (back) {
                back(user);
            }
        }).catch((e) => {
            //Toast.info("e:"+e);

        })
    }

    constructor(props) {
        super(props)
        this.navigation = this.props.navigation;

    }

    loadData = () => {
        this.setState({
            refreshing: true
        })
        api({
            url: "/target/getInfo"
        }).then(data => {
            if (!data.success) {
                this.setState({
                    refreshing: false
                })
                return;
            }
            this.setState({
                target: data.result,
                refreshing: false
            })
        }).catch((data) => {
            this.setState({
                refreshing: false
            })
        })
    }

    componentDidMount() {

        this.loadData();





    }


    /**
     * 更新
     */
    updateTarget = (target) => {

        const stateTarget = this.state.target;

        for (let key in target) {
            stateTarget[key] = target[key];
        }

        this.setState({
            target: stateTarget
        })

        api({
            url: "/target/updateInfo",
            method: "POST",
            body: target
        }).then(data => {
            if (data.success) {
                const { navigation } = this.props;
                navigation.getParam("back", () => { })();
            }
        }).catch(() => {

        })

    }

    _updateUser = (key, value, user) => {
        const form = {
            [key]: value
        };


        userService.update(form).then(data => {
            if (data.success) {
                const u = data.result;

                user[key] = u[key];
                this._updateStorage(user);


            }
        })
    }
    selectScore = () => {
        const { target } = this.state;
        const scorevalue = target.targetScore ? target.targetScore : "00";

        const targetScoreVo = target.targetScoreVo;
        scorePopup([targetScoreVo.listening, targetScoreVo.reading, targetScoreVo.writing,targetScoreVo.speaking], "目标分数: " + scorevalue).then(values => {
            const targetScore = values.reduce((x, y) => x + y);
            let score = targetScore > 0 ? targetScore / 4 : 0;
            score += "";
            const s = score.split(".");
            if (s.length == 2) {
                const s1 = s[1];
                if (s1 === "15") {
                    score = s[0];
                }
                if (s1 === "125") {
                    score = s[0];
                }
                if (s1 === "25") {
                    score = s[0] + ".5";
                }
                if (s1 === "375") {
                    score = s[0] + ".5";
                }
                if (s1 === "625") {
                    score = s[0] + ".5";
                }
                if (s1 === "75") {
                    score = parseInt(s[0]) + 1;
                }
                if (s1 === "875") {
                    score = parseInt(s[0]) + 1;
                }

            }

            this.updateTarget({
                targetScore: parseFloat(score).toFixed(1),
                targetScoreVo: {
                    listening: values[0].toFixed(1),
                    reading: values[1].toFixed(1),
                    speaking: values[3].toFixed(1),
                    writing: values[2].toFixed(1)
                }
            });
        })
    }



    render() {

        console.log("ussser::", this.state);

        const { getParam, state, setParams } = this.navigation;

        const target = this.state.target;

        const user = {};



        return (

            <View style={{ flex: 1, backgroundColor: '#fff' }}>


                <ScrollView
                    style={{ flex: 1, backgroundColor: '#fff' }}

                // refreshControl={
                //     <RefreshControl
                //         colors={[constants.themeColor]}
                //         refreshing={this.state.refreshing}
                //         onRefresh={() => {
                //             this.loadData();
                //         }}
                //         progressBackgroundColor="#fff"
                //     />
                // }
                >




                    <View style={{ backgroundColor: "#fff", }} >

                        <KeyboardAvoidingView behavior={"position"} enabled keyboardVerticalOffset={60}>
                            <List style={{ borderTopWidth: 0, borderBottomWidth: 0 }} >

                                <Item style={{ borderTopWidth: 0, paddingTop: 20 }} onClick={() => {
                                    this.selectScore();


                                }}>
                                    <View style={{ height: 80, justifyContent: "center", alignItems: "center", width: "100%", borderRadius: 16, backgroundColor: "#ec9f2a", marginBottom: 20 }}>
                                        <Text style={{ fontSize: 60, color: "#fff" }}>
                                            {target.targetScore ? target.targetScore : "00"}
                                        </Text>

                                    </View>
                                </Item>

                                <Item onClick={() => {
                                    this.selectScore();
                                }}>
                                    <View style={{ flexDirection: "row", paddingTop: 15, paddingBottom: 15 }}>
                                        <View style={{ width: "25%", alignItems: "center" }}>
                                            <View>
                                                <View style={{ marginBottom: 10 }}>
                                                    <Text style={{ fontSize: 15, color: "#697388" }}>听力</Text>
                                                </View>
                                                <View>
                                                    <Text style={{ fontSize: 24, color: "#000" }}>{target.targetScoreVo.listening}</Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={{ width: "25%", alignItems: "center" }}>
                                            <View>
                                                <View style={{ marginBottom: 10 }}>
                                                    <Text style={{ fontSize: 15, color: "#697388" }}>阅读</Text>
                                                </View>
                                                <View>
                                                    <Text style={{ fontSize: 24, color: "#000" }}>{target.targetScoreVo.reading}</Text>
                                                </View>

                                            </View>
                                        </View>
                                        <View style={{ width: "25%", alignItems: "center" }}>
                                            <View>
                                                <View style={{ marginBottom: 10 }}>
                                                    <Text style={{ fontSize: 15, color: "#697388" }}>写作</Text>
                                                </View>
                                                <View>
                                                    <Text style={{ fontSize: 24, color: "#000" }}>{target.targetScoreVo.writing}</Text>
                                                </View>

                                            </View>
                                        </View>
                                        <View style={{ width: "25%", alignItems: "center" }}>

                                            <View>
                                                <View style={{ marginBottom: 10 }}>
                                                    <Text style={{ fontSize: 15, color: "#697388" }}>口语</Text>
                                                </View>
                                                <View>
                                                    <Text style={{ fontSize: 24, color: "#000" }}>{target.targetScoreVo.speaking}</Text>
                                                </View>
                                            </View>
                                        </View>


                                    </View>
                                    {/* <Flex>
                                        <Flex.Item style={{ alignItems: "flex-start" }}>


                                        </Flex.Item>
                                        <Flex.Item style={{ alignItems: "flex-start" }}>
                                           
                                        </Flex.Item>
                                        <Flex.Item style={{ alignItems: "center" }}>
                                         
                                        </Flex.Item>
                                        <Flex.Item style={{ alignItems: "flex-end" }}>
                                            

                                        </Flex.Item>
                                    </Flex> */}

                                </Item>
                                {/* 
                                <Item arrow="horizontal" extra={target.enrollStatus == 1 ? "已报名" : "未报名"} onClick={() => {
                                    pickerPopup("报名状态", [{
                                        data: ["未报名", "已报名"].map((value, index) => { return { label: value, value: index } })
                                    }]).then(data => {
                                        this.updateTarget({
                                            enrollStatus: data[0]
                                        })
                                    })

                                }}>
                                    <Text style={{
                                        fontSize: 14, color: "#1e1f44",
                                    }}>
                                        状态
                                    </Text>
                                </Item> */}
                                <DatePicker
                                    format={"YYYY-MM-DD"}
                                    mode="date"
                                    minDate={new Date()}
                                    maxDate={new Date(2030, 1, 1)}

                                    extra={target.examDate ? (moment(target.examDate).format("YYYY-MM-DD")) : ""}
                                    onOk={(value) => {
                                        //console.log("date:val",moment(value).format("YYYY-MM-DD"));

                                        this.updateTarget({
                                            examDate: value.getTime()
                                        })
                                    }}

                                >
                                    <Item arrow="horizontal" extra={target.examDate ? target.examDate : ''}>
                                        <Text style={{
                                            fontSize: 14, color: "#1e1f44",
                                        }}>
                                            考试时间
                                        </Text>
                                    </Item>
                                </DatePicker>
                                <Item arrow="horizontal" extra={target.examAddress} onClick={() => {
                                    const { navigation } = this.props;
                                    navigation.navigate("/user/update/address", {
                                        nickname: target.examAddress,
                                        back: (value) => {
                                            if (value) {
                                                this.updateTarget({
                                                    examAddress: value
                                                });
                                            }
                                        }
                                    })

                                }}>
                                    <Text style={{
                                        fontSize: 14, color: "#1e1f44",
                                    }}>
                                        考试地点
                                    </Text>

                                </Item>
                                <Item arrow="horizontal" extra={target.examScore ? target.examScore : "0.0"} onClick={() => {
                                    const text = target.examScore ? target.examScore : "0.0";
                                    const examScoreVo = target.examScoreVo;
                                    scorePopup([examScoreVo.listening, examScoreVo.reading, examScoreVo.writing,examScoreVo.speaking], "当前分数: " + text).then(values => {
                                        //const examScore = values.reduce((x, y) => x + y);
                                        const targetScore = values.reduce((x, y) => x + y);
                                        let score = targetScore > 0 ? targetScore / 4 : 0;
                                        score += "";
                                        const s = score.split(".");
                                        if (s.length == 2) {
                                            const s1 = s[1];
                                            if (s1 === "15") {
                                                score = s[0];
                                            }
                                            else if (s1 === "25") {
                                                score = s[0] + ".5";
                                            }
                                            else if (s1 === "375") {
                                                score = s[0] + ".5";
                                            }
                                            else if (s1 === "625") {
                                                score = s[0] + ".5";
                                            }
                                            else if (s1 === "75") {
                                                score = parseInt(s[0]) + 1;
                                            }
                                            else if (s1 === "875") {
                                                score = parseInt(s[0]) + 1;
                                            } else {
                                                score = s[0] = ".0";
                                            }

                                        }
                                        this.updateTarget({
                                            examScore: score,
                                            examScoreVo: {
                                                listening: values[0],
                                                reading: values[1],
                                                speaking: values[3],
                                                writing: values[2]
                                            }
                                        });

                                    })


                                }}>
                                    <Text style={{
                                        fontSize: 14, color: "#1e1f44",
                                    }}>
                                        当前分数
                                    </Text>

                                </Item>
                                <Item style={{ borderBottomWidth: 0 }}>
                                    <View style={{
                                        marginBottom: 15
                                    }}>
                                        <Text style={{ fontSize: 14, color: "#1e1f44", paddingTop: 5 }}>立个Flag</Text>
                                    </View>
                                    <View>
                                        <TextInput
                                            // multiline={true}
                                            // returnKeyType={"done"}
                                            // returnKeyLabel={"确定"}
                                            textAlignVertical={"top"}
                                            maxLength={100}
                                            multiline={true}

                                            onEndEditing={(e) => {
                                                const text = e.nativeEvent.text;
                                                this.updateTarget({
                                                    declaration: text
                                                })
                                            }}
                                            onChange={e => {
                                                const text = e.nativeEvent.text;
                                                target.declaration = text;

                                                this.setState({
                                                    target: target
                                                })

                                            }} placeholder={""} value={target.declaration} style={{ height: 80, borderWidth: 1, borderColor: "#E5E5E5", borderRadius: 6, padding: 5, fontSize: 14, color: "#1e1f44" }}></TextInput>
                                    </View>
                                </Item>

                            </List>





                        </KeyboardAvoidingView>

                    </View>



                </ScrollView>


            </View>
        )

    }
}